<template>
   <div class="box">
    <vab-card class="width_100">
        <div class="flex_sb box_top">
            <span class="homeTitile">
                单品销售排行榜
            </span>
            <div class="time">
                <DateFiltering ref="dateFilteringRef" @selectDate="handleSelectDate"/>
            </div>
        </div>
        <el-scrollbar v-loading="loading" height="584px">
            <aside
                class="flex"
                :class="{
                  'first': i == 0,
                  'second': i == 1,
                  'third': i == 2
                }"
                v-for="(item, i) in rankingList" :key="i"
            >
                <div class="width_100 flex_sb" v-if="i < 3">
                    <div class="flex">
                        <img class="sort"  :src="`${ossZjkUrl}/dms/image/sort${i + 1}.png`" alt="">
                        <img class="productImg" :src="item.img_url || defaultImg" alt="">
                        <span class="productName" :title="item.goods_name">{{ item.goods_name || '---' }}</span>
                    </div>
                    <span class="productNum">{{ NumberFormat(item.sales_num, 0) || 0 }}</span>
                </div>
                <div class="width_100 flex_sb" v-else>
                    <div class="flex">
                        <span class="defaultSort">{{ i + 1 }}</span>
                        <span class="productName" :title="item.goods_name">{{ item.goods_name }}</span>
                    </div>
                    <span class="productNum">{{ NumberFormat(item.sales_num, 0) || 0 }}</span>
                </div>
            </aside>

            <el-empty v-if="!rankingList.length" description="暂无数据" />
        </el-scrollbar>
    </vab-card>
   </div>
</template>

<script setup lang="ts">
import { defaultImg, ossZjkUrl } from '~/src/config';
import DateFiltering from './DateFiltering.vue'
import { getOrderDetailRank } from '~/src/api/dms/home';
import { NumberFormat, StrSplit } from '~/src/utils/utils';
/**
 * @var
 */
//
const loading = ref(false)
const dateFilteringRef = ref()
const rankingList = ref<any>([])

// 筛选时间
const handleSelectDate = (row: any) => {
  // rankingList.value = []
  _getOrderDetailRank(row)
}

const _getOrderDetailRank = async ({ time, dataType }: any) => {
  loading.value = true

  try {

    let query = {
      dataType: dataType || 'week',
      startTime: dataType == 'custom' ? StrSplit(time, ' / ', 0) : '',
      endTime: dataType == 'custom' ? StrSplit(time, ' / ', 1) : '',
      month: dataType == 'month' ? time : ''
    }

    let res = await getOrderDetailRank({ ...query })

    rankingList.value = res.data

    setTimeout(() => { loading.value = false }, 500);

  } catch (error) {

  }
}


onMounted(() => {
  _getOrderDetailRank({})
})


</script>

<style lang="scss" scoped>
.box {
  :deep() {
    .el-card__body {
      padding: 16px 0 16px !important;
    }

    .el-scrollbar {
      padding: 0 24px;
    }
  }
}

.box_top {
  margin-bottom: 16px;
  margin-top: 8px;
  padding: 0px 24px;
}

aside {
  padding: 12px 16px 12px 26px;
  background: #00000005;
  border-radius: 8px;
  margin-bottom: 8px;

  .sort {
    display: inline-block;
    width: 24px;
    height: 28px;
    margin-right: 16px;
  }

  .productImg {
    display: inline-block;
    width: 52px;
    height: 52px;
    border-radius: 8px;
    margin-right: 8px;
  }

  .productName {
    display: inline-block;
    width: 260px;
    font-family: PingFangSC-Regular;
    font-weight: 400;
    font-size: 14px;
    color: #000000a6;
    letter-spacing: 0;
    line-height: 22px;
    overflow: hidden; //溢出隐藏
    text-overflow: ellipsis; //省略号
    display: -webkit-box; //
    -webkit-box-orient: vertical; //设置弹性盒子的子元素的排列方式
    -webkit-line-clamp: 2; //设置显示文本的行数
  }

  .productNum {
    font-family: PingFangSC-Medium;
    font-weight: 500;
    font-size: 14px;
    color: #000000a6;
    letter-spacing: 0;
    text-align: right;
    line-height: 22px;
    max-width: 42px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  .defaultSort {
    display: inline-block;
    font-family: AlibabaPuHuiTiM;
    font-size: 18px;
    color: #000000a6;
    letter-spacing: 0;
    text-align: center;
    line-height: 26px;
    margin-right: 22px;
  }

  &.first {
    padding: 12px 16px 12px 20px;
    background-image: linear-gradient(99deg, #fcf0bbb0 0%, #fefbe68c 98%);
    border-radius: 8px;

    .title {
      font-weight: 500;
    }

    .productName {
      width: 200px;
    }
  }

  &.second {
    padding: 12px 16px 12px 20px;
    background-image: linear-gradient(90deg, #e6e7f685 0%, #e8e8f738 100%);
    border-radius: 8px;

    .title {
      font-weight: 500;
    }

    .productName {
      width: 200px;
    }
  }

  &.third {
    padding: 12px 16px 12px 20px;
    background-image: linear-gradient(90deg, #ffbc963d 0%, #ffcfa929 100%);
    border-radius: 8px;

    .title {
      font-weight: 500;
    }

    .productName {
      width: 200px;
    }
  }
}
</style>
